<template>
  <div class="student-container">
    <el-container>
      <!-- 侧边栏导航 -->
      <el-aside width="200px">
        <el-menu
          :default-active="activeMenu"
          router
          class="student-menu"
          @select="handleMenuSelect"
        >
          <el-menu-item index="/student/studentHome">
            <el-icon><HomeFilled /></el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-menu-item index="/student/drivingSchoolInfo">
            <el-icon><School /></el-icon>
            <span>驾校信息</span>
          </el-menu-item>
          <el-menu-item index="/student/coachesList">
            <el-icon><User /></el-icon>
            <span>预约教练</span>
          </el-menu-item>
          <el-menu-item index="/student/trainingSchedule">
            <el-icon><Calendar /></el-icon>
            <span>我的训练安排</span>
          </el-menu-item>
          <el-menu-item index="/student/announcementsList">
            <el-icon><Bell /></el-icon>
            <span>公告列表</span>
          </el-menu-item>
          <el-menu-item index="/student/appointmentsList">
            <el-icon><List /></el-icon>
            <span>我的预约</span>
          </el-menu-item>
          <el-menu-item index="/student/feedback">
            <el-icon><ChatDotRound /></el-icon>
            <span>在线反馈</span>
          </el-menu-item>
          <el-menu-item index="/student/studentProfile">
            <el-icon><User /></el-icon>
            <span>个人中心</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 主内容区 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import {
  HomeFilled,
  School,
  User,
  Calendar,
  Bell,
  List,
  ChatDotRound
} from '@element-plus/icons-vue'

const activeMenu = ref('')
const route = useRoute()

/*
主要改动：
移除 onMounted：不再需要在组件挂载时设置初始值
使用 watch 监听路由变化：监听 route.path 的变化，当路由改变时自动更新 activeMenu.value
添加 { immediate: true }：确保在初始化时也会执行一次，相当于原来的 onMounted 逻辑
这样修改后，当用户从首页点击"查看全部"跳转到公告列表时，侧边栏会自动高亮"公告列表"菜单项
 */

// 监听路由变化，更新激活的菜单项
watch(
  () => route.path,
  (newPath) => {
    activeMenu.value = newPath
  },
  { immediate: true }
)
// onMounted(() => {
//   activeMenu.value = route.path
// })

const handleMenuSelect = (index) => {
  activeMenu.value = index
}
</script>

<style scoped>
.student-container {
  height: 100vh;
  display: flex;
}

.student-menu {
  height: 100%;
  border-right: none;
}

.el-aside {
  background-color: #f5f7fa;
  border-right: 1px solid #e6e6e6;
}

.el-main {
  padding: 20px;
  background-color: #fff;
}
</style>
